<template>
  <el-form :model="form" label-width="100px" @submit.native.prevent>
    <el-row class="responsive-row" :gutter="20" type="flex" wrap justify="start">

      <el-col>
        <el-form-item label="模板选择">
          <el-select
            v-model="form.templateName"
            placeholder="请选择模板"
            class="inputNode"
            @change="$emit('templateChange')"
          >
            <el-option v-for="(config, key) in configsData" :key="key" :label="key" :value="key" />
          </el-select>
        </el-form-item>
      </el-col>

      <el-col v-if="form.templateName && form.templateName.includes('60')">
        <el-form-item label="指定语言">
          <el-select v-model="form.language" placeholder="默认英文" @change="$emit('languageChange')">
            <el-option label="英文" value="en" />
            <el-option label="日文" value="jp" />
            <el-option label="韩文" value="kr" />
          </el-select>
        </el-form-item>
      </el-col>

      <el-col>
        <el-form-item label="域名">
          <el-input v-model="form.host" placeholder="如 www.a0.com" />
        </el-form-item>
      </el-col>

      <el-col>
        <el-form-item label="路径">
          <el-input v-model="form.dirpath" placeholder="选填 path" />
        </el-form-item>
      </el-col>

    </el-row>
  </el-form>
</template>

<script>
export default {
  name: 'HostMessage',
  props: {
    form: {
      type: Object,
      required: true
    },
    configsData: {
      type: Object,
      required: true
    }
  }
}
</script>

<style scoped>
.el-row {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
}

.el-col {
  min-width: 240px;
  flex: 1;
}

@media (orientation: portrait) {
  .el-row {
    flex-wrap: wrap;
  }

  .el-col {
    min-width: 250px;
  }
}
</style>
